<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
    <style type="text/css">

        /*设置头像单元格大小*/
        .layui-table-cell {
            height: 50px;
            line-height: 55px;
            text-align: center;
        }

        /* 分页向右
         .layui-table-page {
             float: right;
         }*/

    </style>
</head>
<body>
<blockquote class="layui-elem-quote layui-form ">
    <form>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">员工姓名:</label>
                <div class="layui-input-inline">
                    <select id="search_name" lay-filter="search_name">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">员工性别:</label>
                <div class="layui-input-inline">
                    <select id="search_sex" lay-filter="search_sex">
                        <option value="">--请选择--</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">部门:</label>
                <div class="layui-input-inline">
                    <select id="search_dept" lay-filter="search_dept" lay-search="">

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button type="reset" id="clear_btn" class="layui-btn"><i class="layui-icon">&#x1006;</i>清除</button>
            </div>
        </div>
    </form>
</blockquote>
<!-- 表格 -->
<table id="emp_table" class="layui-table" lay-filter="emp_table"></table>


<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>
    layui.use(['element', 'table', 'jquery', 'layer', 'form'], function () {
        var $ = layui.jquery,
            table = layui.table,
            element = layui.element,
            layer = layui.layer,
            form = layui.form;


        //设置表头
        var clos = [[{
            field: "id", title: '员工编号', width: 100, sort: true, align: 'center'
        }, {
            field: 'truename', title: '员工真实姓名', width: 170, align: 'center'
        }, {
            field: 'dept', title: '所在部门', width: 170, align: 'center', templet: '#deptTel'
        }, {
            field: 'loginname', title: '登录名', width: 170, align: 'center'
        }, {
            field: 'psw', title: '登录密码', width: 170, align: 'center'
        }, {
            field: 'sex', title: '员工性别', width: 170, align: 'center', templet: '#deptsex', event: 'edit_sex'
        }, {
            field: 'img',
            title: '员工头像',
            width: 170,
            align: 'center',
            templet: '#imgtmplet'
        }, {
            field: 'flag', title: '员工类别', width: 170, align: 'center', templet: '#flagTel'
        }, {
            field: 'admin', title: '权限级别', width: 170, align: 'center', templet: '#adminTel'
        }, {
            field: 'is', title: '状态', width: 230, align: 'center', templet: '#isTel'
        }]];

        //table 数据接口
        var tableUrl = '${pageContext.request.contextPath}/empAction_empQuery.action?is=';

        //方法级别渲染表格
        var tableIns = table.render({
            elem: '#emp_table'
            , id: 'emp_table_info'
            , height: 'full-118'
            , cols: clos
            , url: tableUrl
            , method: 'post'
            , page: true
            , limits: [7, 14, 20]
            , limit: 7
        });


        //部门动态添加部门选择
        $.post("${pageContext.request.contextPath}/deptAction_findAll.action", function (data) {

            var options = '<option value="">--请选择--</option>' +
                '<option value="-1">待议</option>';

            for (var i = 0; i < data.length; i++) {
                //拼字符串时千万不能出错，尤其是value不能有空格
                options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
            }
            $("#search_dept").append(options);

            form.render();
        });

        //姓名选择
        $.post("${pageContext.request.contextPath}/empAction_findAllNames.action?is=", function (data) {
            var options = '<option value="">--请选择--</option>';

            for (var i = 0; i < data.length; i++) {
                //拼字符串时千万不能出错，尤其是value不能有空格
                options += '<option value="' + data[i].truename + '">' + data[i].truename + '</option>';
            }

            $("#search_name").append(options);

            form.render();
        });

        form.on('select(search_name)', function (data) {
            tableIns.reload({
                where: {truename: data.value}
            });
        });
        form.on('select(search_sex)', function (data) {
            table_reload();
        });
        form.on('select(search_dept)', function (data) {
//            layer.msg(data.value);
            table_reload();
        });

        function table_reload() {

            var sex = $("#search_sex").val();
            var deptid = $("#search_dept").val();
            tableIns.reload({
                where: {'dept.id': deptid, sex: sex}
            });
        }

        //清除按钮的点击事件
        $("#clear_btn").click(function () {
            tableIns.reload({where: {}});
        });


    });

</script>
<%--图片--%>
<script type="text/html" id="imgtmplet">
    {{#  if(d.img !== ''){ }}
    <div><img src="{{d.img}}" class="layui-circle"
              style=" width: 50px;height: 50px;border: 1px solid plum;padding: 2px;"/></div>;
    {{#  } else { }}
    <div><img src="images/face.jpg" class="layui-circle"
              style=" width: 50px;height: 50px;border: 1px solid hotpink;padding: 2px;"/></div>;
    {{#  } }}
</script>

<%--性别--%>
<script type="text/html" id="deptsex">
    {{#  if(d.sex === '男'){ }}
    <span style="color: #3523f5;">男<i class="layui-icon">&#xe662;</i></span>
    {{#  } else { }}
    <span style="color: #dd14f5;">女<i class="layui-icon">&#xe661;</i></span>
    {{#  } }}
</script>
<%--员工级别--%>
<script type="text/html" id="flagTel">
    {{#  if(d.flag === 0 ){ }}
    <span style="color: #000;">普工</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--员工操作级别--%>
<script type="text/html" id="adminTel">
    {{#  if(d.admin === 0 ){ }}
    <span style="color: #000;">普通操作者</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--部门--%>
<script type="text/html" id="deptTel">
    {{#  if(d.dept === null){ }}
    <span style="color: #f5120c;">待议</span>
    {{#  } else { }}
    <span style="color: #000;">{{d.dept.name}}</span>
    {{#  } }}
</script>
<%--状态--%>
<script type="text/html" id="isTel">
    {{#  if(d.is === 1){ }}
    <span style="color: #2418f5;">在职</span>
    {{#  } else { }}
    <span style="color: #f5120c;">离职</span>
    {{#  } }}
</script>

</body>
</html>
